<template>
    <div style="padding-top:40px">
        <el-row v-if="langs.length > 0" class="play-row">
            <el-col class="filtrate" style="border-right: 1px #ccc solid;">
                <dl>
                    <dt>
                        <h3>语种</h3>
                    </dt><br>
                    <template v-for="(item, index) in langs">
                        <dd :class="['filtrate-dd', curType === item.name ? 'active' : '']"><em
                                @click="clickName(item.name)">{{item.name}}</em></dd>
                    </template>
                </dl>
            </el-col>
            <el-col class="filtrate" style="border-right: 1px #ccc solid;">
                <dl>
                    <dt>
                        <h3>风格</h3>
                    </dt><br>
                    <template v-for="(item, index) in styles">
                        <dd :class="['filtrate-dd', curType === item.name ? 'active' : '']"><em
                                @click="clickName(item.name)">{{item.name}}</em></dd>
                    </template>
                    <el-popover :width="'auto'" trigger="click">
                        <template #reference>
                            <dd v-if="more_styles.length > 0" :class="['filtrate-dd']"><em>更多<el-icon>
                                        <ArrowDown />
                                    </el-icon></em></dd>
                        </template>
                        <div>
                            <span :class="['filtrate-span', curType === item.name ? 'active' : '']"
                                style="padding:0 15px;" v-for="(item, index) in more_styles"><em
                                    @click="clickName(item.name)">{{item.name}}</em></span>
                        </div>
                    </el-popover>
                </dl>
            </el-col>
            <el-col class="filtrate" style="border-right: 1px #ccc solid;">
                <dl>
                    <dt>
                        <h3>场景</h3>
                    </dt><br>
                    <template v-for="(item, index) in scenes">
                        <dd :class="['filtrate-dd', curType === item.name ? 'active' : '']"><em
                                @click="clickName(item.name)">{{item.name}}</em></dd>
                    </template>
                    <el-popover :width="'auto'" trigger="click">
                        <template #reference>
                            <dd v-if="more_scenes.length > 0" :class="['filtrate-dd']"><em>更多<el-icon>
                                        <ArrowDown />
                                    </el-icon></em></dd>
                        </template>
                        <div>
                            <span :class="['filtrate-span', curType === item.name ? 'active' : '']"
                                style="padding:0 15px;" v-for="(item, index) in more_scenes"><em
                                    @click="clickName(item.name)">{{item.name}}</em></span>
                        </div>
                    </el-popover>
                </dl>
            </el-col>
            <el-col class="filtrate" style="border-right: 1px #ccc solid;">
                <dl>
                    <dt>
                        <h3>情感</h3>
                    </dt><br>
                    <template v-for="(item, index) in emotions">
                        <dd :class="['filtrate-dd', curType === item.name ? 'active' : '']"><em
                                @click="clickName(item.name)">{{item.name}}</em></dd>
                    </template>
                    <el-popover :width="'auto'" trigger="click">
                        <template #reference>
                            <dd v-if="more_emotions.length > 0" :class="['filtrate-dd']"><em>更多<el-icon>
                                        <ArrowDown />
                                    </el-icon></em></dd>
                        </template>
                        <div>
                            <span :class="['filtrate-span', curType === item.name ? 'active' : '']"
                                style="padding:0 15px;" v-for="(item, index) in more_emotions"><em
                                    @click="clickName(item.name)">{{item.name}}</em></span>
                        </div>
                    </el-popover>
                </dl>
            </el-col>
            <el-col class="filtrate">
                <dl>
                    <dt>
                        <h3>主题</h3>
                    </dt><br>
                    <template v-for="(item, index) in themes">
                        <dd :class="['filtrate-dd', curType === item.name ? 'active' : '']"><em
                                @click="clickName(item.name)">{{item.name}}</em></dd>
                    </template>
                    <el-popover :width="'auto'" trigger="click">
                        <template #reference>
                            <dd v-if="more_themes.length > 0" :class="['filtrate-dd']"><em>更多<el-icon>
                                        <ArrowDown />
                                    </el-icon></em></dd>
                        </template>
                        <div>
                            <span :class="['filtrate-span', curType === item.name ? 'active' : '']"
                                style="padding:0 15px;" v-for="(item, index) in more_themes"><em
                                    @click="clickName(item.name)">{{item.name}}</em></span>
                        </div>
                    </el-popover>
                </dl>
            </el-col>
        </el-row>

        <div>
            <div class="list-head">
                <h2>{{curType}} <el-icon @click="clickClose" style="cursor: pointer;" v-if="curType === type_name">
                        <Close />
                    </el-icon>
                </h2>
            </div>
            <div class="wrapper" v-infinite-scroll="loadMore" :infinite-scroll-disabled="this.busy"
                infinite-scroll-distance="100" infinite-scroll-throttle-delay="500">
                <play-list :play_list="play_list" :is_true="false" :num="24"></play-list>

                <div element-loading-text="暂无数据..." v-loading="loading"></div>
            </div>
        </div>
    </div>



</template>

<script>
import { ElNotification, ElMessage } from 'element-plus';
import { catlist, playList } from '@apis/http';
import PlayList from '@components/PlayList.vue';

export default {
    data() {
        return {
            play_list: [],
            loading: true,
            type_name: '',
            //语种：0
            langs: [],
            //风格：1
            styles: [],
            //更多风格
            more_styles: [],
            //场景：2
            scenes: [],
            //更多场景
            more_scenes: [],
            //情感：3
            emotions: [],
            //更多情感
            more_emotions: [],
            //主题：4
            themes: [],
            //更多主题
            more_themes: [],
            busy: true,
            curType: '全部歌单',
            offset: 0,

        };
    },
    components: {
        PlayList,
    },
    methods: {
        clickName(value) {
            // console.log("点击=" + value);
            this.type_name = value;
            this.curType = value;

            playList({
                limit: 48,
                cat: value
            }).then(res => {
                // console.log(JSON.stringify(res));
                if (res.code === 200) {
                    this.play_list = res.playlists;
                    this.busy = this.play_list.length >= res.total;
                    this.offset = res.playlists.length;
                } else {
                    ElNotification({
                        type: 'error',
                        title: '提示',
                        message: '接口请求错误，请查看playList()接口',
                    })
                }
            }).catch(res => {
                ElNotification({
                    type: 'error',
                    duration: 0,
                    title: '提示',
                    message: res.message + ",url=" + res.config.url,
                })
            })
        },
        clickClose() {
            this.curType = '全部歌单';

            playList({
                limit: 48,
            }).then(res => {
                if (res.code === 200) {
                    this.play_list = res.playlists;
                    this.busy = this.play_list.length >= res.total;
                    this.offset = res.playlists.length;
                } else {
                    ElNotification({
                        type: 'error',
                        title: '提示',
                        message: '接口请求错误，请查看playList()接口',
                    })
                }
            }).catch(res => {
                ElNotification({
                    type: 'error',
                    duration: 0,
                    title: '提示',
                    message: res.message + ",url=" + res.config.url,
                })
            })
        },
        loadMore() {
            console.log("无限加载");

            playList({
                limit: 48,
                offset: this.offset
                // cat: res.tags[0].name
            }).then(res => {
                // console.log(JSON.stringify(res));
                if (res.code === 200) {
                    for (let i = 0; i < res.playlists.length; i++) {
                        this.play_list.push(res.playlists[i]);
                    }
                    this.offset = this.play_list.length;
                } else {
                    ElNotification({
                        type: 'error',
                        title: '提示',
                        message: '接口请求错误，请查看playList()接口',
                    })
                }
            })
        },
    },
    created: function () {
        // ElMessage({
        //     message: '开发中......',
        // })
        catlist().then(res => {
            // console.log(JSON.stringify(res));
            if (res.code === 200) {
                this.langs = res.sub.filter((i) => {
                    return i.category == 0;
                });
                let arry1 = res.sub.filter((i) => {
                    return i.category == 1;
                });
                let arry2 = res.sub.filter((i) => {
                    return i.category == 2;
                });
                let arry3 = res.sub.filter((i) => {
                    return i.category == 3;
                });
                let arry4 = res.sub.filter((i) => {
                    return i.category == 4;
                });

                if (arry1.length > 8) {
                    this.styles = arry1.slice(0, 8);
                    this.more_styles = arry1.slice(8);
                }
                if (arry2.length > 8) {
                    this.scenes = arry2.slice(0, 8);
                    this.more_scenes = arry2.slice(8);
                }
                if (arry3.length > 8) {
                    this.emotions = arry3.slice(0, 8);
                    this.more_emotions = arry3.slice(8);
                }
                if (arry4.length > 8) {
                    this.themes = arry4.slice(0, 8);
                    this.more_themes = arry4.slice(8);
                }
            } else {
                ElNotification({
                    type: 'error',
                    title: '提示',
                    message: '接口请求错误，请查看catlist()接口',
                })
            }
        });
        playList({
            limit: 48,
            // cat: res.tags[0].name
        }).then(res => {
            // console.log(JSON.stringify(res));
            if (res.code === 200) {
                this.play_list = res.playlists;
                this.busy = this.play_list.length >= res.total;
                this.offset = res.playlists.length;
            } else {
                ElNotification({
                    type: 'error',
                    title: '提示',
                    message: '接口请求错误，请查看playList()接口',
                })
            }
        }).catch(res => {
            ElNotification({
                type: 'error',
                duration: 0,
                title: '提示',
                message: res.message + ",url=" + res.config.url,
            })
        })
    },
}
</script>

<style lang="less" scoped>
.wrapper {
    // min-height: 500px;
    height: 900px;
}

.list-head {
    display: flex;
    padding: 15px 0;

    h2 {
        font-size: 24px;
        line-height: 30px;
    }

    .filter-close {
        display: inline-block;
        line-height: 16px;
        vertical-align: top;
        cursor: pointer;
    }

    .type {
        flex: 1;
        padding: 5px 40px;

        span {
            position: relative;
            z-index: 9;
            display: inline-block;
            height: 20px;
            line-height: 20px;
            margin-right: 34px;
            font-weight: 300;
            color: #333;
            cursor: pointer;

            &.active {
                font-weight: 600;
                color: #000;

                &::after {
                    position: absolute;
                    content: "";
                    left: 0;
                    bottom: 1px;
                    width: 100%;
                    height: 6px;
                    background: var(--color-text-height);
                    z-index: -1;
                }
            }
        }
    }
}

.play-row {
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 20px 27px rgba(0, 0, 0, 0.05);
}

.filtrate {
    padding: 10px;
    max-width: 20%;
}

.filtrate-dd {
    display: inline-block;
    padding-bottom: 5px;
    width: calc(100% / 3);

}

.filtrate-span {
    display: inline-block;
    padding-bottom: 5px;
}

.filtrate-dd.active em {
    background-color: var(--el-color-primary);
    // color: var(--el-color-primary);
    color: #fff;
    padding: 0 6px 0 5px;
    margin: 4px -5px 0;
}

.filtrate-span.active em {
    background-color: var(--el-color-primary);
    // background-color: #31c27c;
    color: #fff;
    padding: 0 6px 0 5px;
    margin: 4px -5px 0;
}

em {
    font-style: normal;
    cursor: pointer;
    line-height: 26px;
}
</style>